<!-- 福利文章 -->
<template>
	<view class="zg-post">
		<view class="zg-post-heard">
			<u-navbar title-color="#fff" back-icon-color="#fff" :background="background" :title="post.articleTitle" :is-fixed="isFixed"
				:is-back="isBack" :custom-back="backPage">
			</u-navbar>
		</view>

		<view class="zg-post-swips" v-if="zgSwips.length>0">
			<u-swiper  :list="zgSwips" ></u-swiper>
		</view>

		<view class="zg-post-content">
			<u-parse :html="post.articleContent"></u-parse>
		</view>
		<view class="zg-post-more">			
			<u-row>
				<u-col span="2">
					<u-icon name="eye" size="40" color="#040127"></u-icon>
					{{cmsArticleCount.articleLook}}
				</u-col>
				<u-col span="7"><u-icon name="clock" size="40" color="#040127"></u-icon>{{post.createTime}}</u-col>
				<u-col span="3" ><u-icon name="zhuanfa" size="40" color="#040127"></u-icon>转发</u-col>
			</u-row>
		</view>
		<view class="zg-post-tui">
			<view class="order" v-for="(item, index) in  listTuiPost" :key="index" @click="toRead(index)">
				<view class="item">
					<view class="left">
						<image :src="getImg(item.articleImg)" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="title u-line-2">{{ item.articleTitle }}</view>
						<view class="type"><u-icon name="eye" size="40" color="#040127"></u-icon>
					{{item.cmsArticleCount.articleLook}}</view>
						<view class="delivery-time"><u-icon name="clock" size="40" color="#040127"></u-icon>{{item.createTime}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					'background-color': '#54547d'
				},
				post: {},
				zgSwips: [],
				isBack: true,
				isFixed: true,
				cmsArticleCount:{},
				listTuiPost: []
			}
		},
		onLoad(options) {
			this.getPost(options.articleId)
		},
		methods: {
			getPost(articleId) {
				this.$http.get('api/article/getHtml/' + articleId).then((res) => {
					this.getListTuiPost(res.cmsCats[0].catId);
				     let img=res.articleImg,b_this = this;
					if (img == null || img == '') {
						b_this.zgSwips.push({
							'image': '/static/images/pdd-icon.jpg',
						});
					}
					else{
						let ims = res.articleImg.split(",");
						ims.forEach(function(value, index) {
							b_this.zgSwips.push({
								'image': value,
							});
						})
					}
					this.post = res;
					this.cmsArticleCount=res.cmsArticleCount;
				})
			},
			getListTuiPost(catId) {
				this.$http.get('api/article/list/cat/' +catId + '/1/10').then((res) => {
					this.listTuiPost = res;
				})
			},
			toRead(index){
				let u='';
				if(this.listTuiPost[index].articleType==1)
				{
					u="/pages/weal/post/post?articleId=" +this.listTuiPost[index].articleId
				}
				else
				{
					u="/pages/course/post/post?articleId=" +this.listTuiPost[index].articleId
				}	
				uni.navigateTo({
					url: u
				});
			},
			backPage() {
				let pages = getCurrentPages();	
				if (pages.length < 2) {				
					uni.switchTab({			
						url: '/pages/home/index/index'
					})
				} else {
					uni.navigateBack();
				}
			
			
			},
		    getImg(articleImg){
				if (articleImg == null || articleImg == '') {
					return '/static/images/pdd-icon.jpg';
				} else {
					return articleImg.split(",")[0];
				}
			}
		}
	}
</script>

<style lang="scss" scoped>	
	.order {
		width: auto;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
	}
	.zg-post-content /deep/ img{
		max-width: 100%!important;
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
	
		.left {
			margin-right: 20rpx;
	
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
	
		.content {
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
	
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
	
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
	
		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
	
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
	
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	
	.zg-post {
		padding: 10rpx;
		background-color: #dcdcdc;

		.zg-post-more,
		.zg-post-tui,
		.zg-post-content {
			margin-bottom: 10rpx;
			margin-top: 10rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}
	}
</style>
